<!--  -->
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="first">
        <span slot="label">未读消息({{ this.NewMessage.length }})</span>
        <el-table :data="NewMessage" style="width: 100%" :show-header="false">
          <el-table-column prop="message" width="800"> </el-table-column>
          <el-table-column prop="date"> </el-table-column>
          <el-table-column>
            <!-- v-slot:default="scope"是vue2.6+新增指令，作为 slot 和 slot-scope 的统一替代语法 -->
            <template v-slot:default="scope">      
              <el-button @click="readMessage(scope.$index, scope.row)"
                >标为已读</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" class="all-operate" @click="allRead"
          >全部标为已读</el-button
        >
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label">已读消息({{ this.OldMessage.length }})</span>
        <el-table :data="OldMessage" style="width: 100%" :show-header="false">
          <el-table-column prop="message" width="800"> </el-table-column>
          <el-table-column prop="date" width="300"> </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="deleteMessage(scope.$index, scope.row)"
                >删除</el-button
              ></template
            >
          </el-table-column>
        </el-table>
        <el-button type="danger" class="all-operate" @click="allDelete"
          >删除全部</el-button
        >
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label">回收站({{ this.recovery.length }})</span>
        <el-table :data="recovery" style="width: 100%" :show-header="false">
          <el-table-column prop="message" width="800"> </el-table-column>
          <el-table-column prop="date"> </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button @click="restoreMessage(scope.$index, scope.row)"
                >还原</el-button
              ></template
            >
          </el-table-column>
        </el-table>
        <el-button type="danger" class="all-operate" @click="allClear"
          >一键清空</el-button
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "TabLabel",
  data() {
    return {
      activeName: "first",
      NewMessage: [],
      OldMessage: [],
      recovery: [],
      receivedData: this.$store.state.receivedData,
    };
  },
  watch: {
    "$store.state.receivedData"(val, oldVal) {
      if (val !== oldVal) {
        this.getMessage();
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getMessage();
    });
  },
  methods: {
    // 调用get方法获取未读消息数据
    getMessage() {
      const count = Number(
        document.querySelector(".el-badge__content.is-fixed").innerHTML
      ); //.el-badge__content.is-fixed是小红点的类名
      this.$axios
        .get(`/add/message`, {
          params: { length: this.$store.state.receivedData || count },
        })
        .then(({ data: res }) => {
          if (res.code == 200) {
            this.NewMessage = res.messageData;
            // console.log(this.receivedData);
          }
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
          // this.$message.error("错了哦，这是一条错误消息");
        });
    },
    // 标为已读按钮
    readMessage(index, row) {
      this.OldMessage.push(row);//在已读消息中添加此行信息
      this.NewMessage.splice(index, 1);//在未读消息中删除此行信息
      this.$message.success("处理成功！");
      this.$store.commit("jian");//操作mutations中的jian方法更新receivedData的值
      console.log(this.$store.state.receivedData);
    },
    // 删除按钮事件
    deleteMessage(index, row) {
      this.$confirm("此操作将永久删除该消息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.recovery.push(row);
          console.log(this.recovery);
          this.OldMessage.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 还原消息事件
    restoreMessage(index, row) {
      this.OldMessage.push(row);
      this.recovery.splice(index, 1);
      this.$message.success("恢复成功！");
    },
    // 一键已读事件
    allRead() {
      //使用concat方法将NewMessage数据添加到已读OldMessage末尾，再使用OldMessage存储合并后的数据
      this.OldMessage = this.OldMessage.concat(this.NewMessage);
      this.NewMessage.splice(0, this.NewMessage.length);
      this.$message.success("已清空回收站！");
      this.$store.commit("updateData", this.NewMessage.length);
    },
    // 删除全部事件
    allDelete() {
      this.$confirm("此操作将永久删除全部消息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.recovery = this.recovery.concat(this.OldMessage);
          this.OldMessage.splice(0, this.OldMessage.length);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 一键清空事件
    allClear() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.recovery.splice(0, this.recovery.length);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang='scss' scoped>
/* tab标签页头部样式 */
/* // 修改标签页表头样式 */
/deep/ .el-tabs__header {
  margin: 15px 0;
  line-height: 50px;
}
.all-operate {
  display: flex;
  margin: 20px 10px;
}
</style>